<template>
    <view class="gift-purchase">
      <view class="header">
        <view><uni-status-bar></uni-status-bar></view>
  
        <view class="search-box flex-cn">
          <view class="navbar-left flex-cn" style="flex: 1" @click="backHome">
            <view style="width: 100rpx;color: #fff; text-align: center"
              class="qh-rt-single qh-rt-zuo-zuo navbar-back-icon">
            </view>
          </view>
  
          <view style="
              height: 80rpx;
              line-height: 80rpx;
              font-size: 36rpx;
              font-family: '.PingFang SC, PingFang SC';
              display: flex;
              justify-content: center;
              align-content: center;
              flex: 1;
              color: #fff;
              font-weight: 600;
            ">
            {{ title }}
          </view>
          <view style="width: 320rpx; flex: 1"></view>
        </view>
      </view>
  
      <scroll-view scroll-y class="shuom-benner_footer">
        <view class="container">
          <!-- Main Card -->
          <view class="card">
            <view class="card-content">
              <view style="font-size: 32rpx; font-weight: 600; color: #DA5C47; text-align: center; display: flex; justify-content: center; align-items: center; height: 80rpx;">【时福全球购春节期间暂停发货公告】</view>
              <text class="greeting">尊敬的顾客朋友们：</text>
              <view class="message">
                春节将至，为了让大家能够享受一个愉快的假期，同时确保物流和服务在节后能够迅速恢复正常，时福全球购特此发布春节期间暂停发货公告。
                <br><text class="notece_title"> 一、暂停发货时间</text><br>
                <view class="notece_content">
                  春节期间，订单将于农历十二月廿八至正月初七期间暂停运营。具体时间为：2025年1月27（十二月廿八）日至2025年2月4日（正月初七）。在此期间，我们将停止所有订单的发货和物流服务。 </view>
                <br><text class="notece_title"> 二、恢复发货时间 </text><br>
                <view class="notece_content">春节假期结束后，我们将于2025年2月5日（正月初八）恢复正常运营，并开始处理节日期间积压的订单。我们会尽快安排发货，确保您的商品能够尽快送达。
                </view>
                <br><text class="notece_title">三、订单处理与售后 </text><br>
                <view class="notece_content">对于在春节期间下单的客户，我们将于节后按订单顺序进行发货。如有特殊情况，我们将通过电话与您联系，并告知相关发货情况。
                  春节期间，如有售后需求（如退货、换货等），我们将于节后初八（即2025年2月5日）开始受理。请耐心等待，我们会尽快为您处理。 </view>
                <br><text class="notece_title">四、温馨提醒 </text><br>
                <view class="notece_content"> 春节期间，由于物流资源紧张，我们可能无法提供正常的物流时效保证。请您在下单前充分考虑这一因素，并合理安排购物时间。
                  如有任何疑问或需要帮助，请随时联系我们的客服团队。我们将竭诚为您服务，并为您解答相关问题。春节期间客服回复可能不如平时及时，敬请谅解。我们会在假期结束后第一时间处理所有留言和咨询。
                  时福全球购感谢大家一直以来的支持与信任。我们将继续努力，为您提供更优质的服务和产品。祝大家春节快乐，阖家幸福！</view>
              </view>
              <view class="signature">时福全球购团队 敬上</view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </template>
  
  <script>
  export default {
    data() {
      return {
        title: "公告",
        isTop: true,
        isScrolled: false,
      };
    },
    computed: {
      headerStyle() {
        return `background-image: ${this.isTop
            ? 'url("https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/173494563867692b66b028b.png")'
            : "none"
          }`;
      },
      styleColor() {
        return `color: ${this.isTop ? "#fff" : "#000 "}`;
      },
    },
    methods: {
      backHome() {
        uni.navigateBack();
      },
      makePhoneCall() {
        uni.makePhoneCall({
          phoneNumber: '15959296192', // Replace with actual phone number
          fail(err) {
            console.error('Phone call failed:', err)
          }
        })
      },
      openLocation() {
        // Replace with actual coordinates
        uni.openLocation({
          latitude: 24.4800,
          longitude: 118.1000,
          name: '君临宝邸商场',
          address: '厦禾路689号君临宝邸商场1层东南角',
          fail(err) {
            console.error('Opening location failed:', err)
          }
        })
      },
      handleQrTap() {
        console.log('二维码被点击');
        uni.showToast({
          title: '长按可以识别二维码',
          icon: 'none'
        });
      },
    },
  };
  </script>
  
  <style lang="scss" scoped>
  .notece_title {
    font-weight: 600;
    color: #000;
    margin-top: 20rpx;
    margin-bottom: 10rpx;
  }
  
  .notece_content {
    text-indent: 2em;
  }
  
  .offline-center {
    overflow-y: auto;
    padding-bottom: env(safe-area-inset-bottom);
  }
  
  .gift-purchase {
    min-height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    background-color: #f5f5f5;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
  }
  
  .header {
    background-color: #fff;
    position: sticky;
    top: 0px;
    z-index: 99;
    background-color: #f5f5f5;
    background-image: url('https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/173494563867692b66b028b.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 100%;
    height: auto;
  }
  
  .shuom-benner_footer {
    flex: 1;
    height: calc(100vh - 180rpx);
    overflow: hidden;
  }
  
  .container {
    padding: 20rpx;
  }
  
  .card {
    background-color: transparent;
    border-radius: 20rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
    background-image: url('https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/1735006999676a1b17eb2d9.png');
    background-size: 100% 100%;
    background-position: center;
  }
  
  .card-content {
    padding: 10rpx 50rpx 50rpx 50rpx;
  }
  
  .card-header {
    margin-bottom: 30rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #DA5C47;
  }
  
  .header-title {
    font-size: 36rpx;
    color: #333;
    font-weight: bold;
  }
  
  .greeting {
    font-size: 28rpx;
    color: #333;
    display: block;
    // font-weight: 600;
    margin-bottom: 10rpx;
  }
  
  .message {
    font-size: 28rpx;
    color: #666;
    line-height: 1.6;
    display: block;
    text-indent: 2em;
    font-weight: 600;
  }
  
  .contact-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx;
  }
  
  .contact-text {
    font-size: 28rpx;
    color: #333;
  }
  
  .icon-wrapper {
    width: 64rpx;
    height: 64rpx;
    flex-shrink: 0;
    margin-right: 20rpx;
  }
  
  .icon {
    width: 100%;
    height: 100%;
  }
  
  .phone-numbers {
    display: flex;
    flex-direction: column;
    gap: 10rpx;
    margin-left: 20rpx;
  }
  
  .phone-content {
    width: 100%;
    display: flex;
    flex-direction: column;
  }
  
  .phone-content>view:first-child {
    display: flex;
    align-items: center;
    margin-bottom: 15rpx;
  }
  
  .phone-action {
    align-self: flex-start;
    margin-left: 84rpx;
    padding: 8rpx 20rpx;
  }
  
  .qr-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40rpx 0;
    background-color: #fff;
    border-radius: 16rpx;
    width: 100%;
    position: relative;
    z-index: 1;
  }
  
  .qr-codes-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 0 20rpx;
  }
  
  .qr-code-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 300rpx;
    padding: 20rpx;
  }
  
  .qr-code {
    width: 100%;
    height: 300rpx;
    background-color: #fff;
  }
  
  .qr-text {
    margin-top: 20rpx;
    font-size: 28rpx;
    color: #333;
    font-weight: 400;
    text-align: center;
    width: 100%;
  }
  
  .location-content {
    width: 100%;
    display: flex;
    flex-direction: column;
  }
  
  .location-content>view:first-child {
    display: flex;
    align-items: center;
    margin-bottom: 15rpx;
  }
  
  .location-action {
    align-self: flex-start;
    margin-left: 84rpx;
    padding: 8rpx 20rpx;
  }
  
  .signature {
    text-align: right;
    font-size: 28rpx;
    color: #333;
    font-weight: 600;
    padding-right: 20rpx;
    margin: 20rpx 0;
  }
  </style>
  
  <style lang="scss" scoped>
  .shuom-describe-container {
    padding: 30rpx;
  }
  
  .shuom-describe-card {
    position: relative;
    width: 100%;
    border-radius: 20rpx;
    overflow: hidden;
  }
  
  .shuom-describe-bg-image {
    width: 100%;
    height: auto;
    display: block;
  }
  
  .shuom-describe-content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 40rpx;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: 60rpx;
  }
  
  .shuom-describe-text-content {
    .shuom-describe-paragraph {
      display: block;
      color: #333;
      font-size: 28rpx;
      line-height: 1.5;
      margin-bottom: 20rpx;
      text-indent: 2em;
      font-weight: 600;
  
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
  </style>
  